import { Plus } from '@icon-park/react'
import { DeepKeys, FormAsyncValidateOrFn, FormValidateOrFn, ReactFormExtendedApi } from '@tanstack/react-form'
import classNames from 'classnames'
import { PropsWithChildren } from 'react'
import { FieldValidate } from '../common/FieldValidate'
import { Label } from '../ui/label'
import { RcUpload } from '../upload/RcUpload'
interface Props<T> extends React.InputHTMLAttributes<HTMLInputElement> {
  formObject: ReactFormExtendedApi<
    T,
    FormValidateOrFn<T> | undefined,
    FormValidateOrFn<T> | undefined,
    FormAsyncValidateOrFn<T> | undefined,
    FormValidateOrFn<T> | undefined,
    FormAsyncValidateOrFn<T> | undefined,
    FormValidateOrFn<T> | undefined,
    FormAsyncValidateOrFn<T> | undefined,
    FormAsyncValidateOrFn<T> | undefined,
    unknown
  >
  fieldName: DeepKeys<T>
  label?: string
  action?: string
  [key: string]: any
}

export const BmImageUpload = <T extends object>({
  formObject,
  fieldName,
  label,
  action,
  children,
  ...props
}: PropsWithChildren<Props<T>>) => {
  return (
    <formObject.Field
      name={fieldName}
      children={(field) => (
        <div>
          {label && (
            <Label htmlFor={field.name} className="mb-2">
              {label}
            </Label>
          )}
          <div
            className={classNames('grid-cols-[1fr_auto] gap-2', {
              grid: !!children
            })}>
            <RcUpload
              action={action ?? '/upload/image'}
              accept=".png,.jpg,.jpeg"
              onSuccess={(v) => {
                field.handleChange(v.url as any)
              }}>
              {field.state.value ? (
                <div className="bg-gray-200 rounded-lg inline-block cursor-pointer">
                  <img src={field.state.value as any} className="w-32 rounded-lg" />
                </div>
              ) : (
                <div className="border inline-block rounded-lg p-3 cursor-pointer">
                  <Plus theme="outline" size="50" strokeWidth={2} />
                </div>
              )}
            </RcUpload>
          </div>
          <FieldValidate name={field.name} errors={field.state.meta.errors} />
        </div>
      )}
    />
  )
}
